<template>
  <div class="date">
    <Title2>
      <div slot="back">
        <van-icon name="arrow-left" @click="$router.go(-1)" />
      </div>
      <div slot="title">学习日历</div>
    </Title2>
    <div class="title">
      <span class="date">{{`${year}年${month}月`}}</span>
      <div>
        <van-icon name="arrow-left" @click="prev" />
        <van-icon name="arrow" @click="next" />
      </div>
    </div>
    <div class="week">
      <div v-for="(item, index) in week" :key="index">{{item}}</div>
    </div>
    <div class="days">
      <div v-for="(item, index) in weekDay" :key="'empty'+index"></div>
      <div
        v-for="(val, index) in days"
        :key="index"
        ref="days"
        :class=" [
          {'today':val==today.d && year==today.y && month==today.m },
          {'active':val==selected.d && selected.y==year && selected.m==month && selected.flag}
        ]"
        @click="selectedDay(val)"
      >{{val}}</div>
    </div>
    <div class="content">
      <div>{{selected.m}}月{{selected.d}}日</div>
      <div>当天{{num}}节课</div>
    </div>
  </div>
</template>

<script>
import Title2 from "../../components/common/Title2";
export default {
  data() {
    return {
      year: new Date().getFullYear(),
      month: new Date().getMonth() + 1,
      week: ["日", "一", "二", "三", "四", "五", "六"],
      days: "",//每个月的天数
      weekDay: "",//每月第一天
      // day: new Date().getDate(),
      today:{//今天
        y:new Date().getFullYear(),
        m:new Date().getMonth()+1,
        d:new Date().getUTCDate(),
      },
      selected:{
        y:new Date().getFullYear(),
        m:new Date().getMonth()+1,
        d:new Date().getUTCDate(),
        flag:true
      },
      num:0
    };
  },
  methods: {
    selectedDay(val){
      this.selected.y=this.year;
      this.selected.m=this.month;
      this.selected.d=val;
      this.selected.flag=true
    },
    prev() {
      this.month--;
      if (this.month < 1) {
        this.month = 12;
        this.year--;
      }
      this.getDay();
      this.getDate();
      this.selected.y=this.year;
      this.selected.m=this.month;
      this.selected.d=1;
      this.selected.flag=false
    },
    next() {
      this.month++;
      if (this.month > 12) {
        this.month = 1;
        this.year++;
      }
      this.getDay();
      this.getDate();
      this.selected.y=this.year;
      this.selected.m=this.month;
      this.selected.d=1;
      this.selected.flag=false
    },
    getDate(){//查每个月多少天
      this.days = new Date(this.year, this.month, 0).getDate();
    },
    getDay(){//获取每月一号是星期几
      this.weekDay = new Date(this.year, this.month - 1, 1).getDay();
    }
  },
  mounted() {
    this.getDay();
    this.getDate();
    // new Date()第3个参数默认为1，就是每个月的1号，把它设置为0时， new Date()会返回上一个月的最后一天，然后通过getDate()方法得到天数
    // console.log(new Date(2020,4,0).getDate())
    // console.log(new Date(2020,3,1).getDay())
    // console.log(new Date().getMonth())
  },
  components: {
    Title2
  }
};
</script>

<style lang="scss" scoped>
.days {
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-flow: wrap;
  div {
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    margin: 9px;
  }
}
.title {
  width: 90%;
  margin: 0 auto;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 25px;
  color: rgb(130, 130, 130);
  .van-icon {
    margin-left: 10px;
  }
}
.week {
  width: 90%;
  margin: 0 auto;
  height: 40px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  div {
    width: 14.2%;
    text-align: center;
    color: rgb(130, 130, 130);
  }
}
.today {
  background: rgb(200, 200, 200);
  border-radius: 30px;
}
.active {
  background: rgb(223, 109, 44);
  border-radius: 30px;
}
</style>